<template>
  <div>
    <el-menu
      default-active="1-4-1"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
      mode="horizontal"
    >
  
      <div class="wenzi">11111</div>
      <div class="icon-1" @click="zhedie">
        <i class="el-icon-arrow-down" v-if="iconShow"></i>
        <i class="el-icon-arrow-up" v-if="!iconShow"></i>
      </div>
       <transition name="el-zoom-in-top">
      <div v-show="show2">
        <div>11111112222222</div>
        <div>11111112222222</div>
        <div>11111112222222</div>
        <div>11111112222222</div>
        <div>11111112222222</div>
      </div>
     </transition>
    </el-menu>
    <el-tabs type="border-card" @tab-click="handleClick">
      <el-tab-pane label="用户管理"><el-radio v-model="radio" label="1">备选项</el-radio>
  <el-radio v-model="radio" label="2">备选项</el-radio></el-tab-pane>
      <el-tab-pane label="配置管理"><DiyTree/></el-tab-pane>
      <el-tab-pane label="供应商管理">
        <SupplierManage />
      </el-tab-pane>
      <el-tab-pane label="进货记录">
        <PurchaseRecord />
      </el-tab-pane>
    </el-tabs>

    <el-cascader :props="props"></el-cascader>

    <div class="wj">wangjingdashen</div>
  </div>
</template>

<script>
import StockManage from "./stockMge/index";
import WareHouseMge from "./WareHouseMge/index";
import SupplierManage from "./SupplierManage";
import PurchaseRecord from "./purchaseRecord";
import DiyTree from "../tree/diyTree"
export default {
  name: "zhedie",
  components: {
    StockManage,
    WareHouseMge,
    SupplierManage,
    PurchaseRecord,
    DiyTree
  },
  data() {
    return {
      radio: '1',
      isCollapse: false,
      ishidden: false,
      iconShow: true,
      show2: true,
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          setTimeout(() => {
            const nodes = [
              {
                value: 1,
                label: `选项1`,
                leaf: false,
              },
              {
                value: 2,
                label: `选项2`,
                leaf: false,
              },
              {
                value: 3,
                label: `选项3`,
                leaf: false,
              },
            ];
            resolve(nodes);
          }, 1000);
        },
      },
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    zhedie() {
      //   console.log(this.isCollapse);
      // this.isCollapse = !this.isCollapse;
      // this.ishidden = !this.ishidden;
      this.iconShow = !this.iconShow;
      this.show2=!this.show2
    },
    handleClick(tab, event) {
      // console.log(tab.label);
      if (tab.label == "用户管理") {
        // this.isCollapse = false;
        // this.ishidden = false;
        this.show2=true
      }
      if (tab.label == "配置管理") {
        // this.isCollapse = false;
        // this.ishidden = false;
        this.show2=true
      }
      if (tab.label == "供应商管理") {
        // this.ishidden = true;
        // this.isCollapse = true;
        this.show2=false
      }
      if (tab.label == "进货记录") {
        // this.ishidden = true;
        // this.isCollapse = true;
        this.show2=false
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo {
  position: relative;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 100%;
}
.wenzi {
  width: 100%;
}
::v-deep .el-menu--collapse {
  width: 100%;
  // height: 300px;
}
.icon-1 {
  position: absolute;
  top: 1%;
  right: 1%;
}
.wj::after{
  content: "after";
  color: red;
  font-size: 20px;
}
.wj::before{
  content: "before";
  color: red;
  font-size: 20px;
}
</style>